<!doctype html>
<html lang="en" dir="ltr" xmlns:th="http://www.thymeleaf.org">
<head th:replace="public/head :: head(个人资料)"></head>
<body class="">
<div class="page">
    <div class="flex-fill">
        <div th:replace="public/menu :: menu(4)"></div>
        <div class="my-3 my-md-5">
            <div class="container">
                <div class="row">
                    <div class="col-md-3">
                        <h3 class="mb-4"><p class="lh-1">个人资料</p></h3>
                        <div>
                            <div class="list-group list-group-transparent mb-0">
                                <a href="#"
                                   class="list-group-item list-group-item-action d-flex align-items-center active"
                                   th:href="@{/admin/profile}">
                                    <span class="icon mr-3">
                                        <svg class="icon" style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4770"><path d="M858.5 763.6c-18.9-44.8-46.1-85-80.6-119.5-34.5-34.5-74.7-61.6-119.5-80.6-0.4-0.2-0.8-0.3-1.2-0.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-0.4 0.2-0.8 0.3-1.2 0.5-44.8 18.9-85 46-119.5 80.6-34.5 34.5-61.6 74.7-80.6 119.5C146.9 807.5 137 854 136 901.8c-0.1 4.5 3.5 8.2 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c0.1 4.4 3.6 7.8 8 7.8h60c4.5 0 8.1-3.7 8-8.2-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z" p-id="4771"></path></svg>
                                    </span>个人资料
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-9">
                        <div class="row">
                        <div class="card">
                            <div class="card-body">
                                <form method="post" th:action="@{/admin/profile}">
                                    <div class="input-icon mb-3">
                                        <label class="form-label">头像</label>
                                        <div class="input-icon mb-3">
                                            <img width="100px" id="avatarShow" height="100px" onclick="javascript:$('#avatar').click()" th:src="${session.SESSION_LOGIN_USER.avatar}">
                                            <input type="file" style="display: none;" id="avatar" accept="image/jpeg" onchange="preImg(this.id, 'avatarShow');">
                                        </div>
                                    </div>
                                    <div class="input-icon mb-3">
                                        <label class="form-label">博客名称</label>
                                        <div class="input-icon mb-3">
                                            <span class="input-icon-addon">
                                              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
                                            </span>
                                            <input type="text" class="form-control" name="blogName" placeholder="请输入博客名称" th:value="${session.SESSION_LOGIN_USER.blogName}">
                                        </div>
                                    </div>
                                    <div class="input-icon mb-3">
                                        <label class="form-label">博客介绍</label>
                                        <div class="input-icon mb-3">
                                            <span class="input-icon-addon">
                                              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
                                            </span>
                                            <input type="text" class="form-control" name="blogIntroduce" placeholder="这个人很懒，什么也没留下" th:value="${session.SESSION_LOGIN_USER.blogIntroduce}">
                                        </div>
                                    </div>
                                    <div class="input-icon mb-3">
                                        <label class="form-label">GitHub</label>
                                        <div class="input-icon mb-3">
                                            <span class="input-icon-addon">
                                                <svg class="icon" style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2061"><path d="M512 12.672c-282.88 0-512 229.248-512 512 0 226.261333 146.688 418.133333 350.08 485.76 25.6 4.821333 34.986667-11.008 34.986667-24.618667 0-12.16-0.426667-44.373333-0.64-87.04-142.421333 30.890667-172.458667-68.693333-172.458667-68.693333C188.672 770.986667 155.008 755.2 155.008 755.2c-46.378667-31.744 3.584-31.104 3.584-31.104 51.413333 3.584 78.421333 52.736 78.421333 52.736 45.653333 78.293333 119.850667 55.68 149.12 42.581333 4.608-33.109333 17.792-55.68 32.426667-68.48-113.706667-12.8-233.216-56.832-233.216-253.013333 0-55.893333 19.84-101.546667 52.693333-137.386667-5.76-12.928-23.04-64.981333 4.48-135.509333 0 0 42.88-13.738667 140.8 52.48 40.96-11.392 84.48-17.024 128-17.28 43.52 0.256 87.04 5.888 128 17.28 97.28-66.218667 140.16-52.48 140.16-52.48 27.52 70.528 10.24 122.581333 5.12 135.509333 32.64 35.84 52.48 81.493333 52.48 137.386667 0 196.693333-119.68 240-233.6 252.586667 17.92 15.36 34.56 46.762667 34.56 94.72 0 68.522667-0.64 123.562667-0.64 140.202666 0 13.44 8.96 29.44 35.2 24.32C877.44 942.592 1024 750.592 1024 524.672c0-282.752-229.248-512-512-512" fill="" p-id="2062"></path></svg>
                                            </span>
                                            <input type="text" class="form-control" name="socialGithub" placeholder="请输入GitHub地址" th:value="${session.SESSION_LOGIN_USER.socialGithub}">
                                        </div>
                                    </div>
                                    <div class="input-icon mb-3">
                                        <label class="form-label">微信</label>
                                        <div class="input-icon mb-3">
                                        </div>
                                        <div id="container" class="dl-horizontal form-group">
                                            <img id="socialWeixinShow" width="100px" height="100px"
                                                 onclick="javascript:$('#socialWeixin').click()"
                                                 th:src="${session.SESSION_LOGIN_USER.socialWeixin} == null ? '' : ${session.SESSION_LOGIN_USER.socialWeixin}">
                                            <br>
                                            <input type="file" style="display: none;" id="socialWeixin" accept="image/jpeg" onchange="preImg(this.id, 'socialWeixinShow')"/>
                                            <a href="#" class="btn btn-outline-primary">上传</a>
                                        </div>
                                    </div>
                                    <div class="input-icon mb-3">
                                        <label class="form-label">微博</label>
                                        <div class="input-icon mb-3">
                                            <span class="input-icon-addon">
                                                <svg class="icon" style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3355"><path d="M736.95 523.19c-35.19-6.82-18.1-25.72-18.1-25.72s34.45-56.79-6.79-98c-51.14-51.14-175.33 6.49-175.33 6.49-47.43 14.75-34.86-6.71-28.13-43.19 0-43-14.74-115.74-141.12-72.75-126.25 43.16-234.65 194.51-234.65 194.51-75.37 100.62-65.4 178.34-65.4 178.34 18.83 171.63 201.2 218.74 343 229.92 149.24 11.67 350.63-51.46 411.69-181.18 61.08-129.94-49.89-181.35-85.2-188.42M421.5 844.38c-148.13 6.93-267.88-67.38-267.88-166.2S273.37 499.82 421.5 493s268.24 54.25 268.24 153-120 191.64-268.24 198.38" p-id="3356"></path><path d="M392 558.17c-149 17.45-131.78 157-131.78 157s-1.51 44.21 40 66.71c87.18 47.2 176.92 18.62 222.3-39.94S541.17 540.86 392 558.17M354.39 754c-27.82 3.27-50.24-12.76-50.24-36.05s19.92-47.42 47.74-50.32c32-3 52.77 15.35 52.77 38.62s-22.56 44.6-50.27 47.75m87.83-74.78c-9.43 7-21 6-26-2.41-5.21-8.26-3.26-21.46 6.3-28.39 11-8.19 22.51-5.84 27.47 2.39 5 8.43 1.43 21.09-7.77 28.4M952.6 445a36 36 0 0 0 1.18-8.56 268 268 0 0 0 3.22-39.92c0-147-119.6-266.68-266.64-266.68a36.87 36.87 0 1 0 0 73.74c106.38 0 192.91 86.56 192.91 192.94a194.51 194.51 0 0 1-3.2 35.28l0.43 0.07a36.7 36.7 0 0 0 72 13.36 0.56 0.56 0 0 1 0-0.23" p-id="3357"></path><path d="M837.17 410.36c0.42-4.58 0.88-9.15 0.88-13.84 0-81.45-66.24-147.69-147.68-147.69a30.72 30.72 0 1 0 0 61.44 86.34 86.34 0 0 1 86.23 86.25 88.46 88.46 0 0 1-0.68 11.08l0.72 0.1c-0.14 1.22-0.72 2.31-0.72 3.57A30.71 30.71 0 0 0 806.63 442c15.52 0 27.82-11.7 29.9-26.67l0.32 0.07c0.08-0.77 0-1.6 0.13-2.36 0-0.6 0.37-1.13 0.37-1.76 0-0.33-0.19-0.6-0.19-0.91" p-id="3358"></path></svg>
                                            </span>
                                            <input type="text" class="form-control" name="socialWeibo" placeholder="请输入微信号" th:value="${session.SESSION_LOGIN_USER.socialWeibo}">
                                        </div>
                                    </div>
                                    <div class="form-footer">
                                        <button type="submit" class="btn btn-primary">Submit</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:replace="admin/dashboard :: footer"></div>
</div>
</body>
<script>

    function getFileUrl(sourceId) {
        var url;
        if (navigator.userAgent.indexOf("MSIE")>=1) { // IE
            url = document.getElementById(sourceId).value;
        } else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox
            url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
        } else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome
            url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
        }
        return url;
    }
    function preImg(sourceId, targetId) {
        var url = getFileUrl(sourceId);
        var imgPre = document.getElementById(targetId);
        imgPre.src = url;
        getPolicy(sourceId);
    }

    function getPolicy(sourceId) {
        $.ajax({
            type: "get",
            url: "/admin/file",
            success: function (data) {
                upload(data.data, sourceId);
            },
            error: function () {
                alert("读取文件失败");
            }
        })
    }

    function upload(param, sourceId) {
        let imgFile = document.getElementById(sourceId).files[0];
        let extName = imgFile.name.substring(imgFile.name.lastIndexOf("."));
        let filePath = param.dir + random_string(8) + extName;
        var request = new FormData();
        request.append('ossaccessKeyId', param.accessid);
        request.append('policy', param.policy);
        request.append('signature', param.signature);
        request.append('key', filePath);
        request.append('dir', param.dir);
        request.append('host', param.host);
        request.append('file', imgFile);
        request.append('submit', "Upload to OSS");
        $.ajax({
            url: param.host,
            data: request,
            processData: false,
            cache: false,
            async: false,
            contentType: false,
            //关键是要设置contentType 为false，不然发出的请求头 没有boundary
            //该参数是让jQuery去判断contentType
            type: "POST",
            success: function (data, textStatus, request) {
                if (textStatus === "nocontent") {
                    let url = param.host + '/' + filePath;
                    updateImage(sourceId, url);
                } else {
                    alert(textStatus);
                }
            }
        });
    }

    function random_string(len) {
        len = len || 32;
        var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
        var maxPos = chars.length;
        var pwd = '';
        for (i = 0; i < len; i++) {
            pwd += chars.charAt(Math.floor(Math.random() * maxPos));
        }
        return pwd;
    }
    function updateImage(key, url) {
        $.ajax({
            url: '/admin/profile/img',
            data: {'key': key, 'url': url},
            type: "POST",
            success: function (data, textStatus, request) {
                if (data.code == 200) {
                    alert("操作成功");
                } else {
                    alert("上传失败，请稍后重试");
                }
            }
        });

    }
</script>
</html>